<template>
    <div class="app-container" style="padding: 5px;">
        <el-card>
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区年度目标完成情况</span>
            </div>
            <el-row>
                <el-col :span="5">
                    <center>
                        <table>
                            <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ yeartarget.area }}</span></td></tr>
                            <tr><td align="center">
                                <i class="el-icon-user-solid" style="color:blue;font-size:16px;margin-top: 10px;">片区名称</i>
                            </td></tr>
                        </table>
                    </center>
                </el-col>
                <el-col :span="5">
                    <center>
                        <table>
                            <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ yeartarget.target }}</span></td></tr>
                            <tr><td align="center">
                                <i class="el-icon-coin" style="color:orange;font-size:16px;margin-top: 10px;">目标(万元)</i>
                            </td></tr>
                        </table>
                    </center>
                </el-col>
                <el-col :span="5">
                    <center>
                        <table>
                            <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ yeartarget.finished }}</span></td></tr>
                            <tr><td align="center">
                                <i class="el-icon-coin" style="color:green;font-size:16px;margin-top: 10px;">出库金额(万元)</i>
                            </td></tr>
                        </table>
                    </center>
                </el-col>
                <el-col :span="5">
                    <center>
                        <table>
                            <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ yeartarget.htfinished }}</span></td></tr>
                            <tr><td align="center">
                                <i class="el-icon-coin" style="color:green;font-size:16px;margin-top: 10px;">接单达成(万元)</i>
                            </td></tr>
                        </table>
                    </center>
                </el-col>
                <el-col :span="4">
                    <center>
                        <table style="margin-top: 5px;">
                            <tr><td align="center"><span style="font-size: 24px;font-weight: bold;">{{ yeartarget.rate }}</span></td></tr>
                            <tr><td align="center">
                                <i class="el-icon-finished" style="color:red;font-size:16px;margin-top: 10px;">接单达成率(%)</i>
                            </td></tr>
                        </table>
                    </center>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区月度目标完成情况</span>
            </div>
            <el-row>
                <el-col :span="12">
                    <div ref="chart1" style="width: 100%;height:400px;"></div>
                </el-col>
                <el-col :span="12">
                    <div ref="chart2" style="width: 100%;height:400px;"></div>
                </el-col>
            </el-row>
            <el-table :data="monthtarget" border stripe style="margin-top: 5px;">
              <el-table-column label="月份" align="center" prop="month"></el-table-column>
              <el-table-column label="接单达成" align="center" prop="htfinished">
                  <template slot-scope="scope">
                    <span style="color:red;">{{ scope.row.htfinished }}万元</span>
                  </template>
              </el-table-column>
              <el-table-column label="保底目标" align="center" prop="target">
                  <template slot-scope="scope">
                      {{ scope.row.target }}万元
                  </template>
              </el-table-column>
              <el-table-column label="冲刺目标" align="center" prop="cctarget">
                  <template slot-scope="scope">
                    <span style="color:orange;">{{ scope.row.cctarget }}万元</span>
                  </template>
              </el-table-column>
              <el-table-column label="保底达成率" align="center" prop="rate">
                <template slot-scope="scope">
                  {{ scope.row.rate }}%
                </template>
              </el-table-column>
              <el-table-column label="冲刺达成率" align="center" prop="ccrate">
                <template slot-scope="scope">
                  {{ scope.row.ccrate }}%
                </template>
              </el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区年度产品聚焦</span>
            </div>
            <el-row>
                <el-col :span="12">
                    <div ref="chart2yearcp" style="width: 100%;height:600px;"></div>
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col :span="24">
                            <div ref="chart2yearzcm" style="width: 100%;height:300px;"></div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div ref="chart2yearqt" style="width: 100%;height:300px;"></div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区月度产品聚焦</span>
            </div>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="top">
                <el-form-item label="月份" prop="month">
                    <el-select v-model="queryParams.month" filterable @change="handleChange">
                        <el-option v-for="item in monthdicts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <div id="areamonth1" style="width: 100%;height:600px;"></div>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="24">
                                <div id="areamonth2" style="width: 100%;height:300px;"></div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div id="areamonth3" style="width: 100%;height:300px;"></div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">片区周目标接单</span>
            </div>
            <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="80px" label-position="top">
                <el-form-item label="周" prop="week">
                    <el-select v-model="queryParams1.week" filterable @change="handleChangeWeek">
                        <el-option v-for="item in weeks" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :data="zcm" border stripe style="margin-top: -10px;">
                <el-table-column label="草花类周目标接单完成情况" align="center">
                    <el-table-column label="产品名称" align="center" prop="bigname"></el-table-column>
                    <el-table-column label="目标" align="center" prop="target">
                        <template slot-scope="scope">
                            <span v-if="scope.row.target!=null">{{ scope.row.target }}万元</span>
                            <span v-if="scope.row.target==null"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="接单达成" align="center" prop="htfinished">
                        <template slot-scope="scope">
                            <span v-if="scope.row.htfinished!=null">{{ scope.row.htfinished }}万元</span>
                            <span v-if="scope.row.htfinished==null"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="达成率" align="center" prop="rate">
                        <template slot-scope="scope">
                            <span v-if="scope.row.rate!=null">{{ scope.row.rate }}%</span>
                            <span v-if="scope.row.rate==null"></span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>

            <el-table :data="qt" border stripe style="margin-top: 10px;">
                <el-table-column label="其他类周目标接单完成情况" align="center">
                    <el-table-column label="产品名称" align="center" prop="bigname"></el-table-column>
                    <el-table-column label="目标" align="center" prop="target">
                        <template slot-scope="scope">
                            <span v-if="scope.row.target!=null">{{ scope.row.target }}万元</span>
                            <span v-if="scope.row.target==null"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="接单达成" align="center" prop="htfinished">
                        <template slot-scope="scope">
                            <span v-if="scope.row.htfinished!=null">{{ scope.row.htfinished }}万元</span>
                            <span v-if="scope.row.htfinished==null"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="达成率" align="center" prop="rate">
                        <template slot-scope="scope">
                            <span v-if="scope.row.rate!=null">{{ scope.row.rate }}%</span>
                            <span v-if="scope.row.rate==null"></span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>

            <el-table :data="zm" border stripe style="margin-top: 10px;">
                <el-table-column label="种球类周目标接单完成情况" align="center">
                    <el-table-column label="产品名称" align="center" prop="bigname"></el-table-column>
                    <el-table-column label="目标" align="center" prop="target">
                        <template slot-scope="scope">
                            <span v-if="scope.row.target!=null">{{ scope.row.target }}万元</span>
                            <span v-if="scope.row.target==null"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="接单达成" align="center" prop="htfinished">
                        <template slot-scope="scope">
                            <span v-if="scope.row.htfinished!=null">{{ scope.row.htfinished }}万元</span>
                            <span v-if="scope.row.htfinished==null"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="达成率" align="center" prop="rate">
                        <template slot-scope="scope">
                            <span v-if="scope.row.rate!=null">{{ scope.row.rate }}%</span>
                            <span v-if="scope.row.rate==null"></span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { listAreaTargetSummary,listAreaMonthsDataInfo,listAreaWeekData } from "@/api/system/sales/dpt/api";
import * as echarts from 'echarts';
export default {
    name: "Xsymbkb",
    data() {
        return {
            area: null,
            yeartarget: {},
            monthtarget: [],
            monthdicts: [],
            weeks: [],
            queryParams: {
                dpt: null,
                month: null,
            },
            queryParams1: {
                dpt: null,
                week: null,
            },
            zcm: [],
            qt: [],
            zm: [],
        }
    },
    created() {
        this.getData();
    },
    mounted(){

    },
    methods: {
        handleChangeWeek(){
            this.getAreaWeekData();
        },
        handleChange(){
            this.getAreaMonthProdct();
        },
        getAreaWeekData(){
            listAreaWeekData(this.queryParams1).then(res =>{
                this.zcm = res.data.zcm;
                this.qt = res.data.qt;
                this.zm = res.data.zm;
            })
        },
        getAreaMonthProdct(){
            listAreaMonthsDataInfo(this.queryParams).then(res =>{
                let labelsb = [];
                if(res.data.brand.length>0){
                    for(let i=0;i<res.data.brand.length;i++){
                        labelsb.push(res.data.brand[i].brand)
                    }
                }

                const chartd1 = echarts.init(document.getElementById("areamonth1"));
                const option1 = {
                    title: {
                        text: '一级品类-接单情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsb,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.brand.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株<br/>成交单数："+item.orders+"单"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.bcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd1.setOption(option1);

                const chartd2 = echarts.init(document.getElementById("areamonth2"));
                let labelsz = [];
                if(res.data.zcm.length>0){
                    for(let i=0;i<res.data.zcm.length;i++){
                        labelsz.push(res.data.zcm[i].brand)
                    }
                }

                const option2 = {
                    title: {
                        text: '自产苗-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsz,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.zcm.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.zcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd2.setOption(option2);

                const chartd3 = echarts.init(document.getElementById("areamonth3"));
                let labelsq = [];
                if(res.data.qt.length>0){
                    for(let i=0;i<res.data.qt.length;i++){
                        labelsq.push(res.data.qt[i].brand)
                    }
                }
                const option3 = {
                    title: {
                        text: '其他-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsq,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.qt.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.qcolors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chartd3.setOption(option3);
            });
        },
        getData(){
            listAreaTargetSummary().then(res =>{
                this.area = res.data.area;
                this.yeartarget = res.data.yeartarget;
                this.monthtarget = res.data.monthtarget;
                this.queryParams.dpt = res.data.area;
                this.monthdicts = res.data.months;
                this.queryParams.month = res.data.month;
                this.queryParams1.week = res.data.week;
                this.queryParams1.dpt = res.data.area;
                this.weeks = res.data.weeks;
                let labels = [];
                if(res.data.monthtarget.length>0){
                    for(let i=0;i<res.data.monthtarget.length;i++){
                        labels.push(res.data.monthtarget[i].month)
                    }
                }
                const chart1 = echarts.init(this.$refs.chart1);
                const option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: ['保底目标', '冲刺目标', '接单达成'],
                        left: 10,
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '保底目标',
                            type: 'bar',
                            data: res.data.monthtarget.map(item => ({
                                value: item.target,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.rate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                                color: 'darkblue' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            data: res.data.monthtarget.map(item => ({
                                value: item.cctarget,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.rate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            itemStyle: {
                              color: 'orange' // 统一设置柱子颜色
                            }
                        },
                        {
                            name: '接单达成',
                            type: 'bar',
                            data: res.data.monthtarget.map(item => ({
                                value: item.htfinished,
                                name: item.month,
                            })),
                            itemStyle: {
                              color: 'red' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart1.setOption(option1);
                const chart2 = echarts.init(this.$refs.chart2);
                const option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.monthtarget.map(item => ({
                                value: item.rate,
                                name: item.month,
                                extraInfo:"<span style='color:black;'>时间: "+item.month+"<br />保底目标: "+item.target+"万元<br/>接单达成: "+item.htfinished+"万元<br/>保底达成率: "+item.rate+"%<br/>冲刺目标: "+item.cctarget+"万元<br />冲刺达成率："+item.ccrate+"%"
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}%' // 标签内容格式化为数据值
                            },
                        }
                    ]
                };
                chart2.setOption(option2);

                let labelsb = [];
                if(res.data.yyj.length>0){
                    for(let i=0;i<res.data.yyj.length;i++){
                        labelsb.push(res.data.yyj[i].brand)
                    }
                }
                const chart2cp = echarts.init(this.$refs.chart2yearcp);
                const optioncp = {
                    title: {
                        text: '一级品类-接单情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsb,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.yyj.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>品类名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株<br/>成交单数："+item.orders+"单"
                            })),
                            itemStyle: {
                                color: 'orange' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart2cp.setOption(optioncp);

                let labelsz = [];
                if(res.data.yzcm.length>0){
                    for(let i=0;i<res.data.yzcm.length;i++){
                        labelsz.push(res.data.yzcm[i].brand)
                    }
                }

                const chart2yearzcm = echarts.init(this.$refs.chart2yearzcm);
                const optionzcm = {
                    title: {
                        text: '自产苗-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsz,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.yzcm.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart2yearzcm.setOption(optionzcm);

                let labelsq = [];
                if(res.data.yqt.length>0){
                    for(let i=0;i<res.data.yqt.length;i++){
                        labelsq.push(res.data.yqt[i].brand)
                    }
                }
                const chart2yearqt = echarts.init(this.$refs.chart2yearqt);
                const optionqt = {
                    title: {
                        text: '其他-接单前五',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'black'
                        },
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labelsq,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',
                            data: res.data.yqt.map(item => ({
                                value: item.finished,
                                name: item.brand,
                                extraInfo:"<span style='color:black;'>系列名称: "+item.brand+"<br />接单金额: "+item.finished+"万元<br/>成交数量: "+item.amount+"株"
                            })),
                            itemStyle: {
                                color: 'lightgreen' // 统一设置柱子颜色
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                fontSize: 10,
                                fontWeight: 'bold',
                                formatter: '{c}万元'
                            },
                        }
                    ]
                };
                chart2yearqt.setOption(optionqt);
                this.getAreaMonthProdct();
                this.getAreaWeekData();
            })
        }
    }
}
</script>
